<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title i18n="options_title"></title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/options.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/yiclearUI.css" >
</head>

<body>
    <div id="wrap">
        <div class="block leftMenu" id="leftMenu">
            <div id="logoDiv">
                <p>
                    <img src="../icons/new-32.png">
                    <span i18n="options_title"></span>
                </p>
            </div>
            <div id="personInfor">
                <p id="version">版本：2.2.3</p>
                <p i18n="options_home_url"></p>
            </div>
            <div class="menu-title" i18n="options_settings_text"></div>
            <div class="menu-item" id="default" aria-controls="options-filters" role="tab" data-toggle="tab">
                <p i18n="options_default"></p>
            </div>
            <div class="menu-item" aria-controls="options-userFilters" role="tab" data-toggle="tab">
                <p i18n="options_userFilters"></p>
            </div>
            <div class="menu-item" aria-controls="options-userRules" role="tab" data-toggle="tab">
                <p i18n="options_userRules"></p>
            </div>
            <div class="menu-item" aria-controls="options-passDomain" role="tab" data-toggle="tab">
                <p i18n="options_passDomain"></p>
            </div>
            <div class="menu-item" aria-controls="options-settings" role="tab" data-toggle="tab">
                <p i18n="options_settings"></p>
            </div>
            <div class="menu-item" aria-controls="options-help" role="tab" data-toggle="tab">
                <p i18n="options_help"></p>
            </div>
            <div id="spread">
            </div>
        </div>
        <div id="rightContent" class="pd0px">
            <div class="tab-content">
                <div class="modal fade" id="addfilterModal" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" i18n="options_addfilter_Modal"></h4>
                            </div>
                            <div class="modal-body">
                                <li class="dropdown" id="accountmenu">
                                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">常用订阅组<b class="caret"></b></a>
                                    <a target="_blank" href="https://www.yiclear.com/filterlists/">在线添加订阅组<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">国内网站规则</a></li>
                                        <li><a href="#">国外网站规则</a></li>
                                        <li><a href="#">恶意软件规则</a></li>
                                        <li><a href="#">baidu美化规则</a></li>
                                        <li><a href="#">卡饭论坛{乘风}规则</a></li>
                                        <li><a href="#">Fanboy's规则</a></li>
                                    </ul>
                                </li>
                                <hr>
                                <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon1">
                            </div>
                            <div class="modal-footer">
                                <a class="button button-close" data-dismiss="modal">关闭</a>
                                <a class="button button-small">提交</a>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
                <div class="modal fade" id="modifyfilter" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" i18n="options_modifyfilter_Modal"></h4>
                            </div>
                            <div class="modal-body">
                                <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon1">
                            </div>
                            <div class="modal-footer">
                                <a class="button button-close" data-dismiss="modal">关闭</a>
                                <a class="button button-small">提交</a>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
                <div class="modal fade" id="filterupdate" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                            </div>
                            <div class="modal-body">
                                <h4 style="text-align: center">更新规则中...</h4>
                            </div>
                            <div class="modal-footer">
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
                <div role="tabpanel" class="tab-panel" id="options-filters">
                    <div class="block check-div">
                        <a i18n="options_addfilter_Modal" class="button button-small" data-toggle="modal" data-target="#addfilterModal"></a>
                        ---<small i18n="options_addfilter_small"></small>
                    </div>
                    <div class="data-div">
                        <div class="row tableHeader">
                            <div class="col-xs-4">
                                标题
                            </div>
                            <div class="col-xs-4">
                                更新时间/信息
                            </div>
                            <div class="col-xs-3">
                                <a i18n="options_update_all" id="options-update-all" class="button button-small" style="right: 0px"></a>
                            </div>
                        </div>
                        <div class="tablebody">
                        </div>
                    </div>
                </div>

                <div role="tabpanel" class="tab-panel" id="options-userFilters">

                    <div class="block check-div">
                        <p i18n="options_userFilters_head_text"></p>

                    </div>

                    <div class="data-div">
                        <div class="block bodyContent">
                            <div class="options-userRules-list">
                                <div class="search-field">
                                    <input type="text" id="user-filters-search" i18n-plhr="options_userfilter_search_placeholder">
                                    <div id="filters_search_underline"></div>
                                </div>
                                <div>
                                    <span i18n="name"></span>订阅组启用规则语法：
                                    <br>
                                    订阅组排除规则语法：域名 操作类型[#passFilters#] 规则ID{可以多个“,”逗号隔开}
                                    <br>
                                    注意:域名不能使用*通配符。
                                    <br>
                                    例子：www.yiclear.com#passFilters#112
                                    <br>
                                    订阅组ID:
                                    <div id="FilterIDsLabel"></div>
                                </div>
                                <select multiple="multiple">

                                </select>
                            </div>
                            <div>
                                <hr>
                                <a  class="button button-small button-options">删除选中项</a>
                                <a  class="button-link" id="clearUserFilterAutoRules">清空</a>
                                <a  class="button-link" id="importUserFilterAutoRules">导入</a>
                                <a  class="button-link">导出</a>
                                <p></p>
                            </div>
                            <input type="file" id="importUserFiltersInput" style="display: none;">
                        </div>
                    </div>
                    <!--						options-userRules-->
                </div>

                <div role="tabpanel" class="tab-panel" id="options-userRules">

                    <div class="block check-div">
                        <p i18n="options_userRules_head_text"></p>

                    </div>

                    <div class="data-div">
                        <div class="block bodyContent">
                            <div class="options-userRules-list">
                                <div class="search-field">
                                    <input type="text" id="user-rules-search" i18n-plhr="options_userRules_search_placeholder">
                                    <div id="rules_search_underline"></div>
                                </div>
                                <div>
                                    <span i18n="name"></span>规则语法：<a href="http://www.yiclear.com/2016/0710/80.html" target="_blank">[完整文档]</a>
                                    <br>
                                    CSS规则语法：域名 操作类型[##,#$#,#@#] tag or attr
                                    <br>
                                    URL规则语法：查找方式[|,||,@@,可空] 地址 属性[$domain$image等等...可空]
                                </div>
                                <select multiple="multiple">

									</select>
                            </div>
                            <div>
                                <hr>
                                <a  class="button button-small button-options">删除选中项</a>
                                <a  class="button-link" id="clearUserRules">清空</a>
                                <a  class="button-link" id="importUserRules">导入</a>
                                <a  class="button-link">导出</a>
                                <p></p>
                            </div>
                            <input type="file" id="importUserRulesInput" style="display: none;">
                        </div>
                    </div>
                    <!--						options-userRules-->
                </div>
                <div role="tabpanel" class="tab-panel" id="options-passDomain">
                    <div class="block check-div">
                        <p i18n="options_passDomain_head_text"></p>
                    </div>

                    <div class="data-div">
                        <div class="block bodyContent">
                            <div class="options-passDomain-list">
                                <div class="search-passDomain">
                                    <input type="text" id="user-pass-search" i18n-plhr="options_passdomain_search_placeholder">
                                    <div id="pass_search_underline"></div>
                                </div>
                                <select multiple="multiple">

                                </select>
                            </div>

                            <div>
                                <hr>
                                <a  class="button button-small button-options">删除选中项</a>
                                <a  class="button-link">清空</a>
                                <a  class="button-link" id="importWhiteListFilter">导入</a>
                                <a  class="button-link">导出</a>
                                <p></p>
                            </div>
                            <input type="file" id="importWhiteListFilterInput" style="display: none;">
                        </div>
                    </div>
                    <!--options-passDomain-->
                </div>
                <div role="tabpanel" class="tab-panel" id="options-settings">
                    <div class="block check-div">
                        <p>常规设置</p>
                    </div>
                    <div class="data-div">
                        <div class="block bodyContent">
                            <hr>
                            <div class="options-css-checkbox">
                                <input class="options-css-checkbox-input" type="checkbox" id="shouldShowBlockElementMenu">
                                <label class="options-css-checkbox-label" for="shouldShowBlockElementMenu">
                                    <span class="options-css-checkbox-icon"></span>
                                    <span class="options-css-checkbox-label-text">添加“过滤元素”到右键菜单</span>
                                </label>
                            </div>
                            <hr>
                            <div class="options-css-checkbox">
                                <input class="options-css-checkbox-input" type="checkbox" id="shouldShowBlock">
                                <label class="options-css-checkbox-label" for="shouldShowBlock">
                                    <span class="options-css-checkbox-icon"></span>
                                    <span class="options-css-checkbox-label-text">在“图标”上显示过滤数</span>
                                </label>
                            </div>
                            <hr>
                            <!--<div class="options-css-checkbox">-->
                                <!--<input class="options-css-checkbox-input" type="checkbox" id="googlecdn">-->
                                <!--<label class="options-css-checkbox-label" for="googlecdn">-->
                                    <!--<span class="options-css-checkbox-icon"></span>-->
                                    <!--<span class="options-css-checkbox-label-text">谷歌前端库使用国内镜像加载[fonts,ajax]{可提高部分国外网站访问速度}.默认关闭</span>-->
                                <!--</label>-->
                            <!--</div>-->
                            <!--<hr>-->
                            <div class="options-css-checkbox">
                                <input class="options-css-checkbox-input" type="checkbox" id="autoupdate">
                                <label class="options-css-checkbox-label" for="autoupdate">
                                    <span class="options-css-checkbox-icon"></span>
                                    <span class="options-css-checkbox-label-text">自动更新规则[只自动更新默认规则]</span>
                                </label>
                            </div>
                            <hr>
                            <div class="options-css-checkbox">
                                <input class="options-css-checkbox-input" type="checkbox" id="Developer">
                                <label class="options-css-checkbox-label" for="Developer">
                                    <span class="options-css-checkbox-icon"></span>
                                    <span class="options-css-checkbox-label-text">支持开发者[<a href="http://www.yiclear.com/2016/0710/63.html" target="_blank">详情</a>]</span>
                                </label>
                            </div>
                            <hr>
                            <!--<div class="options-css-checkbox">-->
                                <!--<input class="options-css-checkbox-input" type="checkbox" id="YoukuDanmu">-->
                                <!--<label class="options-css-checkbox-label" for="YoukuDanmu">-->
                                    <!--<span class="options-css-checkbox-icon"></span>-->
                                    <!--<span class="options-css-checkbox-label-text">使用优酷官方播放器{想看youku弹幕勾选此项}</span>-->
                                <!--</label>-->
                            <!--</div>-->
                            <!--<hr>-->
                            <div class="options-css-checkbox">
                                <input class="options-css-checkbox-input" type="checkbox" id="UpdateFirstRun">
                                <label class="options-css-checkbox-label" for="UpdateFirstRun">
                                    <span class="options-css-checkbox-icon"></span>
                                    <span class="options-css-checkbox-label-text">更新弹出安装页[FirstRun.html]</span>
                                </label>
                            </div>
                            <hr>
                            <div class="options-css-info">
                                <span id="options-block-count">广告过滤数：</span>
                                <a class="button button-gray">清空</a>

                            </div>
                            <hr>
                            <div class="options-css-bak">
                                <input type="file" id="importConfigInput" style="display: none;">
                                <a class="button button-red">备份</a>
                                <a class="button button-gray" id="importConfig">还原</a>
                                <span>注意：自定义规则此处不会备份，还原后会自动关闭设置页面，还原后手动更新一次订阅组以免出现问题！</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-panel" id="options-help">
                    <div class="block check-div">
                        <p>使用帮助</p>
                    </div>
                    <div class="data-div">
                        <div class="block bodyContent">
                            <hr>
                            <div class="options-css-info">
                                <span id="options-help-issue">
                                    常见的一些使用问题以及解决方案。点击右侧查看按钮了解详情！
                                </span>
                                <a class="button button-gray">查看</a>
                            </div>
                            <hr>
                            <div class="options-css-info">
                                <span id="options-help-bug">
                                    如果在使用上发现了任何问题可以点击右侧反馈按钮进行反馈问题！
                                </span>
                                <a class="button button-gray">反馈</a>
                            </div>
                            <hr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="assets/js/jquery-1.8.3.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="i18n.js"></script>
    <script src="../i18n-helper.js"></script>
    <script src="../common-script.js"></script>
    <script src="../content-script.js"></script>
    <script src="optionsUI.js"></script>
    <script src="assets/js/options.js"></script>
</body>

</html>